<template>
	<view class="u-page fullpage" :style="skin">
		<view class="top-warp">
			<zx-nav title="我的关注"></zx-nav>
			<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
		</view>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :top="topH" @down="downCallback" @up="upCallback">
			<!-- 数据列表 -->
			<!-- <view class="list"><item v-for="(item, index) in followlist" :key="index" :orderinfo="item"></item></view> -->
			<view class="main">
				<template v-if="tabIndex == 0">
					<goods-item v-for="(item, index) in followlist" :key="index" :index="index" :info="item" valueKey="cart_num" @changeNum="changeNum" @delItem="delItem"></goods-item>
				</template>
				<template v-else>
					<shopItem v-for="(item, index) in followlist" :key="index" :info="item"></shopItem>
				</template>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import AppTabs from '@/components/app-tabs.vue';
import goodsItem from '@/components/goods-item';
import shopItem from '@/components/shop-item';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState } from 'vuex';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			tabIndex: 0,
			tabs: ['产品', '店铺'],
			followlist: []
		};
	},
	components: {
		AppTabs,
		goodsItem,
		shopItem
	},
	computed: {
		...mapState(['CustomBar']),
		topH() {
			return this.CustomBar + uni.upx2px(100) + uni.upx2px(20) + 'px';
		}
	},
	methods: {
		/*上拉加载的回调*/
		upCallback(mescroll) {
			this.getFollowlist();
		},
		downCallback(mescroll) {
			this.mescroll.resetUpScroll();
		},
		tabChange(e) {
			this.followlist = [];
			this.downCallback();
		},
		getFollowlist() {
			let $me = this;
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			let url = this.tabIndex == 0 ? this.$api.productFollowList : this.$api.shopFollowList;
			this.$postAction(url, param).then(da => {
				if ($me.mescroll.num == 1) {
					this.followlist = [];
				}
				if (da.code == 0 && da.data && da.data.length > 0) {
					let curPageData = da.data;
					$me.mescroll.endBySize(curPageData.length, da.count);
					$me.followlist = $me.followlist.concat(curPageData); //追加新数据
				} else {
					$me.mescroll.endSuccess(0, false);
				}
			});
		},
		changeNum(e) {
			let info = this.followlist[e.index];
			info.cart_num = e.num;
			this.$set(this.followlist, e.index, info);
		},
		delItem(index) {
			this.followlist.splice(index, 1);
		}
	}
};
</script>

<style lang="scss">
.top-warp {
	z-index: 9990;
	position: fixed;
	top: --window-top;
	/* css变量 */
	left: 0;
	width: 100%;
	background-color: white;
}
</style>
